<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%
	String path = request.getScheme() + "://" + request.getServerName()
			+ ":" + request.getServerPort() + request.getContextPath();
%>
<!DOCTYPE html>
<html lang="en">

	<head>
		<title>${futInfo.furName }-【成长故事】@${farm.farmInfoName}</title>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
		<meta name="apple-mobile-web-app-title" content="">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="format-detection" content="telephone=no">
		<link rel="stylesheet" href="<%=path%>/resources/dist/photoswipe.css">
		<link rel="stylesheet" href="<%=path%>/resources/dist/default-skin/default-skin.css">
		<link rel="stylesheet" type="text/css" href="<%=path%>/resources/css/normalize.css" />
		<link rel="stylesheet" href="<%=path%>/resources/css/site.css">
		<link rel="stylesheet" href="<%=path%>/resources/css/base.css">
		<link rel="stylesheet" href="<%=path%>/resources/css/pfpdtow.css">
		<link rel="stylesheet" href="<%=path%>/resources/css/style.css">
		<link rel="stylesheet" href="<%=path%>/resources/css/resume.css">
		<script src="<%=path%>/resources/js/jquery-1.9.1.js" type="text/javascript"></script>
		<script src="<%=path%>/resources/dist/photoswipe.min.js"></script>
		<script src="<%=path%>/resources/dist/photoswipe-ui-default.min.js"></script>
		<script src="<%=path%>/resources/js/jquery-qrcode-G-min.js" type="text/javascript"></script>
		<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=DI6OgImMtiTis7jYrjF4Tv8bsIh1fEIc"></script>
		<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				var clientHeight = document.documentElement.clientHeight;
				var offsetHeight = document.documentElement.offsetHeight;
				if(clientHeight < offsetHeight) {
					$(".meuns").css("display", "none");
				} else {
					$(".meuns").css("display", "inline");
					$(".meunss").css("display", null);
				}
			});
		</script>
		<style>
			.allmap-style{
				width: 80px;
			}
			.mask{
				position:fixed;
				width:100%;
				height:100%;
				background:#000;
				opacity:0.5;
				z-index:10;
				display:none;
			}
			/* video{
			    display : none;
			} */
			.videoBox{
				width:100%;
				height:200px;
			}
		/* 	.markVideo{
				width:100%;
				height:100%;
				background-color:#000;
				opacity:0.5;
				z-index:10;
			} */
			img.button-play {
			    height: 70px;
			    width: 70px;
			    margin-top: 60px;
			    position: absolute;
			    margin-left: -35px;
			    z-index: 2;
			}
			p.tvp_overlay_play.play {
			    margin-top: 10px;
			    height: 100%;
			    width: 100%;
			    bottom: 0px;
			}
			.mask-play{
				width: 100%;
			    height: 200px;
			    background: #000;
			    opacity: 0.5;
			    position: absolute;
			    z-index: 0;
			    /* display: inline-block; */
			    left: 0;
			}
		</style>
	</head>

	<body>
		<div id='wx_pic' style="margin: 0 auto; display: none;">
			<img id="d" src="" />
		</div>
		<div style="height:auto;  margin: 0 auto; background-color: #ebecee;">
			<div id="farminfo" style="display: none;">
				<div style="height: 62px; width: 100%;"></div>
				<div class="farm_left">
					<div style="margin: 10px; min-height: 160px;">
						<span class="farm_img-father"><img class="farm_img" src="http://ll.sharestar.cn/image/${futInfo.furImage.substring(0,19)}_raw.jpg" alt="" /></span>
						<p class="farm_p">${farm.farmInfoName}</p>
						<h2 class="farm_bg">
                        <span class="farm_id" style="font-size:.9rem">${futInfo.furName }</span>
                    </h2>
						<span style="margin-top: 10px; display: block; ">
						${futInfo.furIntro }
					</span>
					</div>
					<div style="padding: 10px; border-top: 1px solid #ccc;">
						<span><span class="farm_bg">种植时间：</span>
						<fmt:formatDate value="${futInfo.furPlantDate}" pattern="yyyy年MM月dd日 " />
						</span>
					</div>
					<div style="padding: 10px; border-top: 1px solid #ccc; line-height: 1.4rem;border-bottom: 1px solid #ccc;">
						<span><span class="farm_bg">采收时间：</span>
						<fmt:formatDate value="${futInfo.furStartDate}" pattern="yyyy年MM月dd日 " /> 至
						<fmt:formatDate value="${futInfo.furEndDate}" pattern="yyyy年MM月dd日 " />
						</span>
					</div>
					<div style="text-align: center; padding-top: 20px;">
						<img src="<%=path%>/resources/images/sq.png" alt="" style="width: 25px;height:25px;" class="close" />
					</div>
				</div>
			</div>
			<div class="farm_meun gz_show">
				<a href="<%=path%>/pc/record/toMain?farmId=${farm.farmInfoId}&farmerId=${farmerInfo.farmerId}" style="top: 6px; left: 8px; position: absolute; z-index: 1; font-size: .9rem; min-width: 50px; height: 50px; text-align: center;">
					<img src="<%=path%>/resources/images/zy-1.png" alt="" style="width: 32px;" />
					<p style="margin-top: -.7rem;">农场主页</p>
				</a>
				<div style="top:4px; right: 8px; position: absolute; z-index: 1; font-size: .9rem; min-width: 50px; height: 50px; text-align: center;">
					<a class="show"><img src="<%=path%>/resources/images/qing.png" alt="" style="width: 35px;"></a>
					<p style="margin-top: -.7rem;">商品详情</p>
				</div>
				<img src="<%=path%>/resources/images/top-l.jpg" style="position: absolute; top: 0; left: 0; z-index: -1;" />
				<img src="<%=path%>/resources/images/top-r.jpg" style="position: absolute; top: 0; right: 0; z-index: -1;" />
			</div>
			<div style="height: 70px; width: 100%;"></div>
			<div class="gz_show">
				<div id="allmap"></div>
				<a href="<%=path%>/pc/record/toLocation?farmerId=${farmerInfo.farmerId}">
					<div style="width: 100%; height: 200px; z-index: 1; position: absolute; top: 70px;">
						<img class="allmap-style" src="<%=path%>/resources/images/wlz.png" alt="" width="80px" style="margin-left: 5px; margin-top: 10px;" />
					</div>
				</a>
			</div>
			<div class="gz_show" style="text-align: center; margin: 10px 5px; font-size: 16px;">
				<div style="background-color: #fff; border-bottom: 1px solid #ccc;">
					<img src="<%=path%>/resources/images/CZRJ.png" width="100%" />
				</div>
			</div>
			<div class="demo-gallery" id="demo-test-gallery">
				<c:forEach items="${furDyList}" var="furDetial" varStatus="index">
					<div class="main gz_show">
						<div class="sjz">
							<img alt="" src="<%=path%>/resources/images/NaoZhong.png" style="background-color: #fff;">
							<img alt="" src="<%=path%>/resources/images/ZX-T.png" style="bottom: -5px; position: absolute; left: 0;">
						</div>
						<div class="photoshow">

							<div style="line-height: 24px; font-size: 1rem;padding-top: .5rem;">
								<span id="xyz0">采收中...</span> <span style="display: block; float: right;"><fmt:formatDate value="${furDetial.fdCreationdate}"  pattern="yyyy年MM月dd日 HH:mm"/></span>
							</div>
							<c:if test="${furDetial.fdVideo !='null' }">
								<!--视频 -->
							  	<div class="audio">
			                        <p class="tvp_overlay_play play">
			                         	<span class="mask-play"></span>
			                        	<img class="button-play" src="<%=path%>/resources/images/play.png">
			                        </p> 
			                        <input type="hidden" value="http://ll.sharestar.cn/video/${furDetial.fdVideo }" data-num="${furDetial.id }">
			                      
			                       <c:if test="${furDetial.fdVideoThumb !='null' }">
				                        <div class="poster_img">
				                           <img src="http://ll.sharestar.cn/image/${furDetial.fdVideoThumb}" alt="">
				                        </div>
			                        </c:if>
			                  
			                       <div class="videoBox">
			                       
			                       </div> 
			                        <span class="imgs" style="text-shadow: 1px 1px 0 #000; text-align:right;margin-right: 12px; width: 185px;">
			                             <span style="color: #fff;"><img alt="" src="<%=path%>/resources/images/fzd.png" style="width: 20px;margin-top: 5px; margin-left: 25px;">
								  		 ${farm.farmInfoAddress.split('-')[2]}
								    </span><br>
									<span class="cDate"><fmt:formatDate value="${furDetial.fdCreationdate}"  pattern="yyyy年MM月dd日 HH:mm"/></span>
			                        </span>
			                    </div>
							 </c:if> 
							<c:if test="${furDetial.fdVideo =='null'}">
								<ul>
									<li>
										<c:if test="${furDetial.fdImageA != 'null'}">
											<a href="http://ll.sharestar.cn/image/${furDetial.fdImageA.substring(0,19)}_raw.jpg" data-med="http://ll.sharestar.cn/image/${furDetial.fdImageA.substring(0,19)}_raw.jpg" data-size="1600x1600" data-med-size="1024x1024" data-author="Folkert Gorter" class="demo-gallery__img--main">
												<img class="tupian" src="http://ll.sharestar.cn/image/${furDetial.fdImageA.substring(0,19)}_raw.jpg">
											</a> 
											<c:set var="nums" value="1"></c:set>
										</c:if>
										<c:if test="${furDetial.fdImageB != 'null'}">
											<a href="http://ll.sharestar.cn/image/${furDetial.fdImageB.substring(0,19)}_raw.jpg" data-med="http://ll.sharestar.cn/image/${furDetial.fdImageB.substring(0,19)}_raw.jpg" data-size="1600x1600" data-med-size="1024x1024" data-author="Thomas Lefebvre">
												<img class="tupian" src="http://ll.sharestar.cn/image/${furDetial.fdImageB.substring(0,19)}_raw.jpg">
											</a>
											<c:set var="nums" value="2"></c:set>
										</c:if>
										<c:if test="${furDetial.fdImageC != 'null'}">
											<a href="http://ll.sharestar.cn/image/${furDetial.fdImageC.substring(0,19)}_raw.jpg" data-med="http://ll.sharestar.cn/image/${furDetial.fdImageC.substring(0,19)}_raw.jpg" data-size="1600x1600" data-med-size="1024x1024" data-author="Thomas Lefebvre">
												<img class="tupian" src="http://ll.sharestar.cn/image/${furDetial.fdImageC.substring(0,19)}_raw.jpg">
											</a>
											<c:set var="nums" value="3"></c:set>
										</c:if>
									</li>
									<span class="imgs" style="text-shadow: 1px 1px 0 #000; text-align:right;margin-right: 12px;width: 185px;">
		                            <span style="color: #fff;" class="adress" ><img alt="" src="<%=path%>/resources/images/fzd.png" style="width: 20px; margin-top: 5px;margin-left: 25px;">&nbsp;${farm.farmInfoAddress.split('-')[2]}</span><br>
									<span class="cDate" id="createDate0"><fmt:formatDate value="${furDetial.fdCreationdate}"  pattern="YYYY年MM月dd日 HH:mm"/></span>
									</span>
									<span class="num"> <c:out value="${nums}"/>张</span>
								</ul>
							</c:if>
						</div>
						<div style="padding-right: 8px; font-size: .85rem; padding-top: 5px; color: #aaa;" align="right">
								<c:if test="${furDetial.fdVideo =='null'}">图像采集地点：</c:if>
								<c:if test="${furDetial.fdVideo !='null'}">视频拍摄地点：</c:if>
								<span>${furDetial.fdplot}</span>
						</div>
						<div style="padding: 5px; font-size: .85rem; font-family: 黑体;">
							<span style="display: block; margin-left: 20px;line-height: 20px;">	${furDetial.fdIntro}</span>
						</div>
					</div>
				</c:forEach>
			</div>
			<div class="mask"></div>
		</div>
		<div class="meuns" style="height:56px;">
			<div class="imgleft">
				<div class="img farmerid-dian">
					<input type="hidden" id="isLike" value="${isLike}">
					<input type="hidden" id="agree" value="${agree.agree}">
					<input type="hidden" id="furId" value="${furId}">
					<a href="javascript:;">
						<img id="dzs" src="" alt="" onclick="dosubmit()" />
					</a>
					<span id="dzNum">${agree.agree}</span>
				</div>
			</div>
			<div class="imgright">
				<div class="img farmerid">
					<a href="<%=path%>/pc/record/toMain?farmId=${farm.farmInfoId}&farmerId=${farmerInfo.farmerId}">
						<img src="<%=path%>/resources/images/wym1.png" alt="" />
					</a>
					<span>我要买</span>
					<input id="furl" type="hidden" value="" />
				</div>
			</div>
		</div>
		<div class="meunss" style="display: none; width: 100%; height: 45px;"></div>
		<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
			<div class="pswp__bg"></div>
			<div class="pswp__scroll-wrap">
				<div class="pswp__container">
					<div class="pswp__item"></div>
					<div class="pswp__item"></div>
					<div class="pswp__item"></div>
				</div>
				<div class="pswp__ui pswp__ui--hidden">
					<div class="pswp__top-bar">
						<div class="pswp__counter"></div>
						<button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
						<!-- <button class="pswp__button pswp__button--share" title="Share"></button> -->
						<button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
						<button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
						<div class="pswp__preloader">
							<div class="pswp__preloader__icn">
								<div class="pswp__preloader__cut">
									<div class="pswp__preloader__donut"></div>
								</div>
							</div>
						</div>
					</div>
					<div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
						<div class="pswp__share-tooltip"></div>
					</div>
					<button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
                </button>
					<button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
                </button>
					<div class="pswp__caption">
						<div class="pswp__caption__center"></div>
					</div>
				</div>
			</div>
		</div>
		<script type="text/javascript">
			// 百度地图API功能
			var x = ${farmerInfo.longtitude};
			var y = ${farmerInfo.latitude};
			var map = new BMap.Map("allmap", {
				mapType: BMAP_HYBRID_MAP
			});
			var point = new BMap.Point(x, y);
			map.centerAndZoom(point, 12);
			var marker = new BMap.Marker(point);
			map.addOverlay(marker);
			// 创建地址解析器实例
			var myGeo = new BMap.Geocoder();
			// 将地址解析结果显示在地图上,并调整地图视野
			myGeo.getPoint(function(point) {
				if(point) {
					map.centerAndZoom(point, 16);
					map.addOverlay(new BMap.Marker(point));
				} else {
					alert("您选择地址没有解析到结果!");
				}
			}, "北京市");

			map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
		</script>
		<script type="text/javascript">
			$(function() {
				var isLike = $("#isLike").val(); //是否点赞过
				if(isLike == 0) { //没有点赞记录
					$('#dzs').attr("src", "<%=path%>/resources/images/dz1.png");
				} else {

					$('#dzs').attr("src", "<%=path%>/resources/images/dz2.png");
				}
			});
			
		</script>
		<script>
		    $(document).ready(function(){
		            $(".sjz:not('.sjz:first')").children('img:first-of-type').attr("src","<%=path%>/resources/images/TL.png");
		            $(".sjz:last").children('img:last-of-type').attr("src","<%=path%>/resources/images/XT.png");
		    })
		</script>
		<script type="text/javascript">
			//商品详情展开-收起
			$(".show").click(function() {
				var style = $("#farminfo").css("display");
				if(style == "none") {
					$("#farminfo").css("display", "block");
					$(".mask").css("display", "block");
				} else {
					$("#farminfo").css("display", "none");
					$(".mask").css("display", "none");
				}
			});
			$(".close").click(function() {
				$("#farminfo").css("display", "none");
				$(".mask").css("display", "none");
			});
			//点赞

			function dosubmit() {
				var isLike = $("#isLike").val(); //是否点赞过
				var agreeTimes = $("#agree").val(); //点赞次数
				var furId = $("#furId").val();
				if(isLike == 0) { //没有点赞记录
					agreeTimes = parseInt(agreeTimes) + 1; //点赞次数
				} else {
					agreeTimes = parseInt(agreeTimes) - 1; //点赞次数
				}
				$.ajax({
					url: "<%=path%>/pc/record/isGood",
					type: "POST",
					dataType: "json",
					data: {
						"agree": agreeTimes,
						"furId": furId,
						"isLike": isLike
					},
					success: function(data) {
						if(data.isLike == "0") {
							$("#isLike").val(0);
							$('#dzs').attr("src", "<%=path%>/resources/images/dz1.png");
						} else {
							$("#isLike").val(1);
							$('#dzs').attr("src", "<%=path%>/resources/images/dz2.png");
						}
						$("#agree").val(agreeTimes);
						$("#dzNum").text(agreeTimes);
					}
				});
			}
		</script>
		<script type="text/javascript">
			//底部菜单隐藏显示
			$(function() {
				var cubuk_seviye = $(document).scrollTop();
				$(window).scroll(function() {
					var kaydirma_cubugu = $(document).scrollTop();
					if(kaydirma_cubugu > cubuk_seviye) {
						//$('.meuns').removeClass('gizle');//显示
						$('.meuns').fadeOut(500);
					} else {
						//$('.meuns').addClass('gizle');//隐藏
						$('.meuns').fadeIn(500);
					}
					cubuk_seviye = $(document).scrollTop();
				});
			});
		</script>
		<!--视频播放-->
		<script>
		 	var u = navigator.userAgent, app = navigator.appVersion;//获取浏览器用户代理:Navigator 对象包含有关浏览器的信息。
	    	var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //
	    	var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
		 	//点击播放视频
		 	if(isAndroid){
		 			 $(".play").click(function(){
				 		 $(this).css("display","none");
				 		 $(this).siblings(".poster_img").hide();
				 		 var videoSrc = $(this).siblings("input").val();
				 	     var videoid = $(this).siblings("input").attr("data-num");
				 		 var videoBox=$(this).siblings(".videoBox");
				 		videoBox.html(
								 '<video src="'+videoSrc+'" type="video/mp4" codecs="avc1.42E01E, mp4a.40.2"  controls="controls" id="'+videoid+'"></video>'
						 ); 
			 			var video = document.getElementById(videoid);
			 			video.play();
			 			var $play = $(this);
			 			video.addEventListener("x5videoexitfullscreen", function(){
							$play.css("display","block");
							$play.siblings(".poster_img").show();
							video.remove(); 
						}); 
		 			 }); 
		 		 }else{
		 			 $(".play").click(function(){
				 		 $(this).css("display","none");
				 		 $(this).siblings(".poster_img").hide();
				 		 $(this).siblings(".imgs").hide();
				 		 var videoSrc = $(this).siblings("input").val();
				 	     var videoid = $(this).siblings("input").attr("data-num");
				 		 var videoBox=$(this).siblings(".videoBox");
				 		videoBox.append(
				 				'<video id="'+videoid+'"  src="'+videoSrc+'" width="100%"  controls style="object-fit: fill;"   type="video/mp4" codecs="avc1.42E01E, mp4a.40.2"  x5-video-player-type="h5" x5-video-player-fullscreen="true" ></video>'
						 ); 
				 		var video = document.getElementById(videoid);
				 		var $video = $(video);
				 		console.log($video);
				 		$video.trigger("play");
		 			 }); 
		 		 }
		</script>
		<!--图片浏览-->
		<script>
			(function() {
				var initPhotoSwipeFromDOM = function(gallerySelector) {
					var parseThumbnailElements = function(el) {
						var thumbElements = el.childNodes, 
							numNodes = thumbElements.length,
							items = [],
							el,
							childElements,
							thumbnailEl,
							size,
							item;
						for(var i = 0; i < numNodes; i++) {
							el = thumbElements[i];
							// include only element nodes
							if(el.nodeType !== 1) {
								continue;
							}
							childElements = el.children;
							size = el.getAttribute('data-size').split('x');
							// create slide object
							item = {
								src: el.getAttribute('href'),
								w: parseInt(size[0], 10),
								h: parseInt(size[1], 10),
								author: el.getAttribute('data-author')
							};
							item.el = el; // save link to element for getThumbBoundsFn
							if(childElements.length > 0) {
								item.msrc = childElements[0].getAttribute('src'); // thumbnail url
								if(childElements.length > 1) {
									item.title = childElements[1].innerHTML; // caption (contents of figure)
								}
							}
							var mediumSrc = el.getAttribute('data-med');
							if(mediumSrc) {
								size = el.getAttribute('data-med-size').split('x');
								// "medium-sized" image
								item.m = {
									src: mediumSrc,
									w: parseInt(size[0], 10),
									h: parseInt(size[1], 10)
								};
							}
							// original image
							item.o = {
								src: item.src,
								w: item.w,
								h: item.h
							};
							items.push(item);
						}
						return items;
					};
					// find nearest parent element
					var closest = function closest(el, fn) {
						return el && (fn(el) ? el : closest(el.parentNode, fn));
					};
					var onThumbnailsClick = function(e) {
						e = e || window.event;
						e.preventDefault ? e.preventDefault() : e.returnValue = false;

						var eTarget = e.target || e.srcElement;

						var clickedListItem = closest(eTarget, function(el) {
							return el.tagName === 'A';
						});

						if(!clickedListItem) {
							return;
						}

						var clickedGallery = clickedListItem.parentNode;

						var childNodes = clickedListItem.parentNode.childNodes,
							numChildNodes = childNodes.length,
							nodeIndex = 0,
							index;

						for(var i = 0; i < numChildNodes; i++) {
							if(childNodes[i].nodeType !== 1) {
								continue;
							}

							if(childNodes[i] === clickedListItem) {
								index = nodeIndex;
								break;
							}
							nodeIndex++;
						}

						if(index >= 0) {
							openPhotoSwipe(index, clickedGallery);
						}
						return false;
					};

					var photoswipeParseHash = function() {
						var hash = window.location.hash.substring(1),
							params = {};

						if(hash.length < 5) { // pid=1
							return params;
						}

						var vars = hash.split('&');
						for(var i = 0; i < vars.length; i++) {
							if(!vars[i]) {
								continue;
							}
							var pair = vars[i].split('=');
							if(pair.length < 2) {
								continue;
							}
							params[pair[0]] = pair[1];
						}

						if(params.gid) {
							params.gid = parseInt(params.gid, 10);
						}

						return params;
					};

					var openPhotoSwipe = function(index, galleryElement, disableAnimation, fromURL) {
						var pswpElement = document.querySelectorAll('.pswp')[0],
							gallery,
							options,
							items;

						items = parseThumbnailElements(galleryElement);

						// define options (if needed)
						options = {

							galleryUID: galleryElement.getAttribute('data-pswp-uid'),

							getThumbBoundsFn: function(index) {
								// See Options->getThumbBoundsFn section of docs for more info
								var thumbnail = items[index].el.children[0],
									pageYScroll = window.pageYOffset || document.documentElement.scrollTop,
									rect = thumbnail.getBoundingClientRect();

								return {
									x: rect.left,
									y: rect.top + pageYScroll,
									w: rect.width
								};
							},

							addCaptionHTMLFn: function(item, captionEl, isFake) {
								if(!item.title) {
									captionEl.children[0].innerText = '';
									return false;
								}
								captionEl.children[0].innerHTML = item.title + '<br/><small>Photo: ' + item.author + '</small>';
								return true;
							}

						};

						if(fromURL) {
							if(options.galleryPIDs) {
								// parse real index when custom PIDs are used
								// http://photoswipe.com/documentation/faq.html#custom-pid-in-url
								for(var j = 0; j < items.length; j++) {
									if(items[j].pid == index) {
										options.index = j;
										break;
									}
								}
							} else {
								options.index = parseInt(index, 10) - 1;
							}
						} else {
							options.index = parseInt(index, 10);
						}

						// exit if index not found
						if(isNaN(options.index)) {
							return;
						}

						var radios = document.getElementsByName('gallery-style');
						for(var i = 0, length = radios.length; i < length; i++) {
							if(radios[i].checked) {
								if(radios[i].id == 'radio-all-controls') {

								} else if(radios[i].id == 'radio-minimal-black') {
									options.mainClass = 'pswp--minimal--dark';
									options.barsSize = {
										top: 0,
										bottom: 0
									};
									options.captionEl = false;
									options.fullscreenEl = false;
									options.shareEl = false;
									options.bgOpacity = 0.85;
									options.tapToClose = true;
									options.tapToToggleControls = false;
								}
								break;
							}
						}

						if(disableAnimation) {
							options.showAnimationDuration = 0;
						}

						// Pass data to PhotoSwipe and initialize it
						gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);

						// see: http://photoswipe.com/documentation/responsive-images.html
						var realViewportWidth,
							useLargeImages = false,
							firstResize = true,
							imageSrcWillChange;

						gallery.listen('beforeResize', function() {

							var dpiRatio = window.devicePixelRatio ? window.devicePixelRatio : 1;
							dpiRatio = Math.min(dpiRatio, 2.5);
							realViewportWidth = gallery.viewportSize.x * dpiRatio;

							if(realViewportWidth >= 1200 || (!gallery.likelyTouchDevice && realViewportWidth > 800) || screen.width > 1200) {
								if(!useLargeImages) {
									useLargeImages = true;
									imageSrcWillChange = true;
								}

							} else {
								if(useLargeImages) {
									useLargeImages = false;
									imageSrcWillChange = true;
								}
							}

							if(imageSrcWillChange && !firstResize) {
								gallery.invalidateCurrItems();
							}

							if(firstResize) {
								firstResize = false;
							}

							imageSrcWillChange = false;

						});

						gallery.listen('gettingData', function(index, item) {
							if(useLargeImages) {
								item.src = item.o.src;
								item.w = item.o.w;
								item.h = item.o.h;
							} else {
								item.src = item.m.src;
								item.w = item.m.w;
								item.h = item.m.h;
							}
						});

						gallery.init();
					};

					// select all gallery elements
					var galleryElements = document.querySelectorAll(gallerySelector);
					for(var i = 0, l = galleryElements.length; i < l; i++) {
						galleryElements[i].setAttribute('data-pswp-uid', i + 1);
						galleryElements[i].onclick = onThumbnailsClick;
					}

					// Parse URL and open gallery if it contains #&pid=3&gid=1
					var hashData = photoswipeParseHash();
					if(hashData.pid && hashData.gid) {
						openPhotoSwipe(hashData.pid, galleryElements[hashData.gid - 1], true, true);
					}
				};

				initPhotoSwipeFromDOM('.demo-gallery');

			})();
		</script>
	</body>

</html>